<template>
	<view class="share">
		<canvas class="canvas-area" canvas-id="postCanvars" @ready="initCanvas"></canvas>
		<view class="save dis" @click="saveToImage">
			<view class="saveImg">
				<image src="/post/static/7.png" mode="aspectFill"></image>
			</view>
			<view class="saveText">保存到相册</view>
		</view>
	</view>
</template>

<script setup>
import { threadInfo } from '@/config/api.js';
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const queryVal = ref('');

// rpx转px
const rpxToPx = (rpx) => {
	const systemInfo = uni.getSystemInfoSync();
	return (rpx / 750) * systemInfo.windowWidth;
};

onLoad((options) => {
	console.log('页面参数:', options);
	queryVal.value = options.url;
	getItemFun();
});

const userImg = ref('');
const userName = ref('');
const title = ref('');
const getItemFun = async () => {
	const res = await threadInfo(queryVal.value, {});
	console.log(res);
	if (res.code == 0) {
		userImg.value = res.data.forumThread.author.avatar;
		userName.value = res.data.forumThread.author.nickname;
		title.value = res.data.forumThread.title ? res.data.forumThread.title : res.data.forumThread.content;
		initCanvas();
	}
};

const initCanvas = () => {
	const ctx = uni.createCanvasContext('postCanvars', this);

	const width = rpxToPx(690);
	const height = rpxToPx(876);
	const radius = rpxToPx(20); // 圆角半径

	// 创建圆角矩形路径
	ctx.beginPath();
	ctx.moveTo(radius, 0);
	ctx.lineTo(width - radius, 0);
	ctx.arcTo(width, 0, width, radius, radius);
	ctx.lineTo(width, height - radius);
	ctx.arcTo(width, height, width - radius, height, radius);
	ctx.lineTo(radius, height);
	ctx.arcTo(0, height, 0, height - radius, radius);
	ctx.lineTo(0, radius);
	ctx.arcTo(0, 0, radius, 0, radius);
	ctx.closePath();
	ctx.clip(); // 裁剪后续绘制内容

	// 设置画布背景（使用转换后的px值）
	ctx.setFillStyle('#FFFFFF');
	ctx.fillRect(0, 0, rpxToPx(690), rpxToPx(876));

	// 绘制渐变背景
	const gradient = ctx.createLinearGradient(0, 0, 0, rpxToPx(876));
	gradient.addColorStop(0, '#DAEFFF');
	gradient.addColorStop(1, '#FFFFFF');
	ctx.setFillStyle(gradient);
	ctx.fillRect(0, 0, rpxToPx(690), rpxToPx(876));

	// 绘制顶部图片
	uni.getImageInfo({
		src: 'https://48-kz.oss-accelerate.aliyuncs.com/oss-cn-beijing.aliyuncs.com1578068703652100.png',
		success: (res) => {
			ctx.drawImage(res.path, rpxToPx(24), rpxToPx(24), rpxToPx(642), rpxToPx(458));
			drawRemainingContent(ctx);
		}
	});
};

const drawRemainingContent = (ctx) => {
	// 绘制头像
	uni.getImageInfo({
		src: userImg.value,
		success: (res) => {
			// 绘制圆形头像
			const avatarX = rpxToPx(24 + 48);
			const avatarY = rpxToPx(24 + 458 + 24 - 50 + 48);
			const avatarRadius = rpxToPx(48);

			ctx.save();
			ctx.beginPath();
			ctx.arc(avatarX, avatarY, avatarRadius, 0, 2 * Math.PI);
			ctx.closePath();
			ctx.clip();
			ctx.drawImage(res.path, rpxToPx(24), rpxToPx(24 + 458 + 24 - 50), rpxToPx(96), rpxToPx(96));
			ctx.restore();

			// 绘制头像边框
			ctx.beginPath();
			ctx.arc(avatarX, avatarY, avatarRadius, 0, 2 * Math.PI);
			ctx.setStrokeStyle('#FFFFFF');
			ctx.setLineWidth(rpxToPx(2));
			ctx.stroke();

			// 绘制用户名
			ctx.setFontSize(rpxToPx(28));
			ctx.setFillStyle('#000000');
			ctx.setTextAlign('left');
			ctx.fillText(userName.value, rpxToPx(24 + 104), rpxToPx(24 + 458 + 24 + 20));

			// 绘制图标和标题
			uni.getImageInfo({
				src: 'https://48-kz.oss-accelerate.aliyuncs.com/oss-cn-beijing.aliyuncs.com1579436876928800.png',
				success: (iconRes) => {
					ctx.drawImage(iconRes.path, rpxToPx(24), rpxToPx(24 + 458 + 24 + 36 + 20), rpxToPx(32), rpxToPx(32));

					// 绘制标题文本
					ctx.setFontSize(rpxToPx(24));
					ctx.fillText(title.value, rpxToPx(24 + 40), rpxToPx(24 + 458 + 24 + 36 + 24 + 20));

					// 绘制虚线
					ctx.beginPath();
					ctx.setLineWidth(rpxToPx(2));
					ctx.setStrokeStyle('#C5D3E2');
					ctx.setLineDash([rpxToPx(5), rpxToPx(5)], 0);
					ctx.moveTo(rpxToPx(24), rpxToPx(24 + 458 + 24 + 36 + 32 + 30));
					ctx.lineTo(rpxToPx(24 + 642), rpxToPx(24 + 458 + 24 + 36 + 32 + 30));
					ctx.stroke();
					ctx.setLineDash([], 0);

					// 绘制底部二维码和文字
					uni.getImageInfo({
						src: 'https://48-kz.oss-accelerate.aliyuncs.com/oss-cn-beijing.aliyuncs.com1578917987469500.png',
						success: (qrRes) => {
							ctx.drawImage(qrRes.path, rpxToPx(24), rpxToPx(24 + 458 + 24 + 36 + 32 + 30 + 30), rpxToPx(180), rpxToPx(180));

							// 绘制底部文字
							ctx.setFontSize(rpxToPx(24));
							ctx.setFillStyle('#797E9F');
							ctx.fillText('长按识别扫码，查看完整帖子', rpxToPx(24 + 180 + 30), rpxToPx(24 + 458 + 24 + 36 + 32 + 30 + 30 + 90));

							// 绘制完成
							ctx.draw(false, () => {
								console.log('Canvas绘制完成');
							});
						}
					});
				}
			});
		}
	});
};

const saveToImage = () => {
	uni.canvasToTempFilePath({
		canvasId: 'postCanvars',
		success: (res) => {
			const tempFilePath = res.tempFilePath;
			uni.saveImageToPhotosAlbum({
				filePath: tempFilePath,
				success: () => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('保存失败:', err);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			});
		},
		fail: (err) => {
			console.error('生成图片失败:', err);
			uni.showToast({
				title: '生成图片失败',
				icon: 'none'
			});
		}
	});
};
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.share {
	position: relative;
	padding: 30rpx;
	padding-top: 90rpx;
	width: 100vw;
	height: 100vh;
	background-color: #262d3f;
	font-family: PingFang SC, PingFang SC;
	overflow: hidden;
	.canvas-area {
		width: 690rpx;
		height: 876rpx;
		background: '#FFFFFF';
		border-radius: 20rpx;
		overflow: hidden;
	}
	.save {
		margin-top: 50rpx;
		padding-left: 244rpx;
		width: 690rpx;
		height: 100rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		border: 2rpx solid #8799bd;
		.saveImg {
			margin-top: 30rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.saveText {
			margin-left: 14rpx;
			line-height: 100rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
}
</style>
